<template>
  <DFModal
    ref="basicModalRef"
    :class="['basicModal',`${language === 'en' ? 'basicModal-en' : ''}`]"
    :title="title"
    :width="modalWidth"
    @on-ok="okModalFn"
    @register="modalRegister"
  >
    <DrawerTemplateContent v-if="optionsData" ref="drawerTemplateContentRef" />
    <template #action>
      <n-space>
        <n-button @click="closeModal">{{ $t(`common.button.close`) }}</n-button>
      </n-space>
    </template>
  </DFModal>
</template>

<script lang="ts" setup name="DrawerTemplateModal">
// import { useMessage } from 'naive-ui';
import { DFModal, useModal } from '@/components/DFModal';

import DrawerTemplateContent from './DrawerTemplateContent.vue';

import { useMixins } from '@/hooks/useMixins';

// import {getByteLength} from '@/utils/dfModbus/hex'

const drawerTemplateContentRef: any = ref(null);

const basicModalRef: any = ref(null);

const title: any = ref(null);

const modalWidth:any = ref(null);

const [
  modalRegister,
  {
    openModal,
    closeModal,
    // setSubLoading:setSubLoadingFn
  }
] = useModal({});

const { language } = useMixins();

const okModalFn = async () => {};

// const modalSubmitFn = async () => {
//   try {
//     // const data: any = { ...cloneDeep(getModalFormValFn()), ...orgData };
//     // if (res) {
//     //   const { message: msg = '' } = res;
//     //   closeModal();
//     //   message.success(msg || '保存成功');
//     //   emit('reloadFn');
//     // } else {
//     //   setSubLoading(false);
//     // }
//   } catch (e) {
//     setSubLoading(false);
//     console.log(e);
//   }
// };

const optionsData: any = ref(null);

const openModalFn = async (data: any, id = null, scrollId = null) => {
  if (data) {
    const { labelZh = null, labelEn = null ,modalWidth:dModalWidth = null} = data;

    if (dModalWidth) {
      modalWidth.value = dModalWidth;
    }

    if (labelZh || labelEn) {
      title.value =
        language.value === 'zh' ? labelZh || labelEn : labelEn || labelZh;
    } else {
      title.value = null;
    }

    optionsData.value = data;

    openModal();

    nextTick(() => {
      if (
        drawerTemplateContentRef &&
        drawerTemplateContentRef.value &&
        drawerTemplateContentRef.value.initFn
      ) {
        drawerTemplateContentRef.value.initFn(data, id, scrollId);
      }
    });
  }
};

const closeModalFn = async () => {
  if (
    drawerTemplateContentRef &&
    drawerTemplateContentRef.value &&
    drawerTemplateContentRef.value.deleteAddReadListFn
  ) {
    await drawerTemplateContentRef.value.deleteAddReadListFn();

    nextTick(() => {
      optionsData.value = null;
    });
  }
};

defineExpose({ openModalFn, closeModalFn });
</script>

<style lang="less">
.basicModal-en{
  .drawerTemplateData .drawerTemplateData-view-item .drawerTemplateData-view-item-label{
    width: 210px;
    font-size: 14px;
  }

  .drawerTemplate-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab{
    font-size: 16px;
  }
}
</style>
